<demo>
分栏偏移
</demo>
<template>
  <div>
    <Row>
      <Col class="demoBox" span="24">
        <Row>
          <Col span="12" class="demoBox-item">span-12</Col>
          <Col span="6" :offset="6" class="demoBox-item1">span-12</Col>
        </Row>
      </Col>
      <Col class="demoBox" span="24">
        <Row>
          <Col span="6" :offset="6" class="demoBox-item1">span-6</Col>
          <Col span="6" :offset="6" class="demoBox-item">span-6</Col>
        </Row>
      </Col>
      <Col class="demoBox" span="24">
        <Row>
          <Col span="12" :offset="6" class="demoBox-item">span-12</Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script lang="ts">
import Row from '../../lib/row/Row.vue'
import Col from '../../lib/row/Col.vue'
export default {
  components: {
    Row,
    Col,
  },
}
</script>

<style lang="scss" scoped>
.demoBox {
  margin: 16px;
}
.demoBox-item {
  background: rgba(0, 146, 255, 0.75);
  color: #fff;
  min-height: 50px;
  text-align: center;
  line-height: 50px;
}
.demoBox-item1 {
  background: #0092ff;
  color: #fff;
  min-height: 50px;
  text-align: center;
  line-height: 50px;
}
</style>
